import React from 'react';
import {
    Table,
    Button,
    message,
    Modal,
    Form,
    Input
} from 'antd';
import axios from 'axios';
import intercept from '../../../utils/intercept';
import { config } from 'utils';
import format from './format';
import '../less/Rent.less';
const confirm = Modal.confirm;
const FormItem = Form.Item;

//订单详情组件
class OrderLists extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            data: [],
            visible: false
        };
    }
    componentDidMount() {
        this.getOrderdetail();
    };
    stateChange = (text, record) => {
        const token = sessionStorage.getItem("token");
        axios.post(`${config.api}Rental/ChangeSendOrders`, { orderCode: text.orderCode, sendOrderiId: text.sendingOrderId, type: 1 }, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
            if (data.data.result) {
                message.success('改派成功！');
                this.props.upData();
            } else {
                message.warning(data.data.errorMessage);
            }
        });
    }
    visibleShow = (text, record) => {
        this.sendOrderiId = text.sendingOrderId;
        this.setState({
            visible: true
        });
    }
    visibleHide = () => {
        this.setState({
            visible: false,
        });
    }
    handleOk = (e) => {
        this.setState({
            visible: false,
        });
    }

    RentAddOrder = (e) => {
        e.preventDefault();
        const token = sessionStorage.getItem("token");
        const text = this.props.form.getFieldsValue();
        if (text.OrdersAdd !== undefined) {
            axios.post(`${config.api}Rental/ChangeSendOrders`, { orderCode: text.OrdersAdd, sendOrderiId: this.sendOrderiId, type: 2 }, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
                if (data.data.result) {
                    message.success('添加成功！');
                    this.props.upData();
                } else {
                    message.warning(data.data.errorMessage);
                }
            })
            .catch(err => {
                intercept;
            })
            this.setState({
                visible: false,
            });
        } else {
            message.warning('请输入定单号！');
        }
    }

    getOrderdetail() {
        const token = sessionStorage.getItem("token");
        this.setState({ loading: true });
        const url = `${config.api}Rental/GetOrdersForSendingOrder?sendOrderId=${this.props.id}`;
        axios
            .get(url, { headers: { Authorization: 'Bearer ' + token } })
            .then((data) => {
                this.setState({ loading: false, data: data.data.orders });
            })
            .catch(err => {
                intercept;
            })
    };
    render() {
        const column = [
            {
                title: '订单号',
                dataIndex: 'orderCode',
                width: 180
            }, {
                title: '线路名',
                dataIndex: 'carLineName',
                width: 150
            }, {
                title: '乘客电话',
                dataIndex: 'userPhone',
                width: 150
            }, {
                title: '人数',
                dataIndex: 'passengerAccount',
                width: 80
            }, {
                title: '总金额',
                dataIndex: 'originalTotalPrice',
                width: 80
            }, {
                title: '支付金额',
                dataIndex: 'payAmount',
                width: 80
            }, {
                title: '约租时间',
                dataIndex: 'rentalTime',
                width: 180,
                render: (text, record) => {
                    return (
                        <span>{format.format(record.rentalTime)}</span>
                    )
                }
            }, {
                title: '操作',
                // dataIndex: 'ticketNum',
                width: 150,
                render: (text, record) => {
                    return (
                        <span>
                            <Button type="primary" className="operation" ghost onClick={(text, record => { this.stateChange(text, record) })}>改派</Button>
                            <Button type="primary" ghost onClick={(text, record => { this.visibleShow(text, record) })}>添加</Button>
                        </span>
                    )
                }
            },
        ];
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <Modal
                    title="编辑"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.visibleHide}
                    footer={null}
                >
                    <Form onSubmit={this.RentAddOrder}>
                        <FormItem label={(
                            <span>
                                订单号
                            </span>
                        )} hasFeedback>
                            {getFieldDecorator('OrdersAdd', {
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please input your startandend!',
                                        whitespace: true
                                    }
                                ]
                            })(<Input type="text" placeholder="请输入订单号" />)}
                        </FormItem>
                        <Button type="primary" className="AddOrders" htmlType="submit">添加</Button>
                    </Form>
                </Modal>

                <Table
                    rowKey={record => record.id}
                    columns={column}
                    rowClassName={() => { return 'childtable' }}
                    dataSource={this.state.data}
                    bordered={true}
                    pagination={false}
                    size="small" />
            </div>

        );
    }
}

const OrderList = Form.create()(OrderLists);
export default OrderList